import React,{useState} from 'react'
import { ConfigProvider, DatePicker, message } from 'antd';
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/lib/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

export default function Test() {
    const [date, setDate] = useState<any>(null);

    const handleChange = (value:any) => {
        console.log(value);
      message.info(`您选择的日期是: ${value ? value.format('YYYY-MM-DD') : '未选择'}`);
      setDate(value);
    };
    return (
      <ConfigProvider locale={zhCN}>
        <div style={{ width: 400, margin: '100px auto' }}>
          <DatePicker onChange={handleChange} />

          <div style={{ marginTop: 16 }}>
            当前日期：{date ?  date.format('YYYY年MM月DD日') : '未选择'}
          </div>
        </div>
      </ConfigProvider>
    );
}
